<script lang='ts'>
import { ref, reactive, toRefs, defineComponent } from "vue";
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "标题",
    },
  },
  setup() {},
});
</script>
<!-- 模型 -->
<template>
  <div class="pageStyle1">
    <div class="pageStyle1Header">
      <div class="headerLeft">
        <slot name="headerLeft">{{ title }}</slot>
      </div>

      <div class="headerRight">
        <slot name="headerRight"></slot>
      </div>
    </div>
    <div class="pageStyle1Main">
      <slot name="main"></slot>
    </div>
  </div>
</template>

<style scoped>
.pageStyle1 {
  border: 1px solid #e2e2e2;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.form-column :deep(.el-form-item__content) {
  align-items: flex-start;
  flex-direction: column;
}

.pageStyle1Header {
  height: 50px;
  line-height: 50px;
  background-color: #f3f3f3;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pageStyle1Main {
  /* padding: 50px 100px; */
}

.tips {
  font-size: 12px;
  color: #cacaca;
}

.shortInput {
  width: 80px;
}

.txtMain {
  color: black;
}

:deep(.el-divider--horizontal) {
  margin: 50px 0;
}

</style>